<template>
  <div>
    <!--1.header头部  start-->
	<div class="site-topbar">
		<div class="container">
			<div class="topbar-nav">
				<a href="#">小米商城</a><span class="sep">|</span>
				<a href="#">MIUI</a><span class="sep">|</span>
				<a href="#">IoT</a><span class="sep">|</span>
				<a href="#">云服务</a><span class="sep">|</span>
				<a href="#">金融</a><span class="sep">|</span>
				<a href="#">有品</a><span class="sep">|</span>
				<a href="#">小爱开放平台</a><span class="sep">|</span>
				<a href="#">政企服务</a><span class="sep">|</span>
				<a href="#">Select Region</a>
			</div>
			<div class="topbar-cart">
				<a href="#">
					<i class="iconfont icon-iconfontcart"></i>购物车
					<span>（0）</span>
				</a>
			</div>
			<div class="topbar-info">
				<a href="2-login.html">{{username}}</a><span class="sep">|</span>
				<a href="#">注册</a><span class="sep">|</span>
				<a href="#">消息通知</a>
			</div>
		</div>
	</div>
	<div class="site-header">
		<div class="container">
			<div class="header-logo inline">
				<a href="#">
					<img :src="logoimg"/>
				</a>
			</div>
			<div class="header-nav inline">
				<ul class="nav-list">
					<li class="nav-item"><a href="#"></a></li>
					<li class="nav-item">
						<a href="#">小米手机</a>
						<div class="xiala">
							<ul>
								<li class="smdetail"><img :src="xiao1"/>
									<div class="wenzi">
										<a href="#"><b>小米8</b></a>
										<b>2669元起</b>
									</div>
								</li>
								<li class="smdetail"><img :src="xiao2"/></li>
								<li class="smdetail"><img :src="xiao3"/></li>
								<li class="smdetail"><img :src="xiao4"/></li>
								<li class="smdetail"><img :src="xiao5"/></li>
								<li class="smdetail"><img :src="xiao6"/></li>
							</ul>
						</div>	
					</li>
					<li class="nav-item"><a href="#">红米</a>
					</li>
					<li class="nav-item"><a href="#">电视</a></li>
					<li class="nav-item"><a href="#">笔记本</a></li>
					<li class="nav-item"><a href="#">空调</a></li>
					<li class="nav-item"><a href="#">新品</a></li>
					<li class="nav-item"><a href="#">路由器</a></li>
					<li class="nav-item"><a href="#">只能硬件</a></li>
					<li class="nav-item"><a href="#">服务</a></li>
					<li class="nav-item"><a href="#">社区</a></li>
				</ul>
		</div><div class="header-search inline">
				<form class="search-form">
					<div class="search-div" style="border:1px solid #D4D4D4;">
						<input type="text" class="search-text" name="keyword" />
						<input type="submit" class="search" value=""/>
					</div>
					
				</form>
				<div class="clear"></div>
				<!--<div class="search-hot-words">
					<a href="#">小米8</a>
					<a href="#">小米MIX 2S</a>
				</div>-->
			</div>
		</div>
	</div>
  </div>
</template>

<script>
import logoimg from '@/assets/img/logo.png'
import xiao1 from '@/assets/img/xiao1.png'
import xiao2 from '@/assets/img/xiao2.png'
import xiao3 from '@/assets/img/xiao3.png'
import xiao4 from '@/assets/img/xiao4.png'
import xiao5 from '@/assets/img/xiao5.png'
import xiao6 from '@/assets/img/xiao6.jpg'





export default {
  data () {
    return {
      logoimg:logoimg,
      xiao1:xiao1,
      xiao2:xiao2,
      xiao3:xiao3,
      xiao4:xiao4,
      xiao5:xiao5,
			xiao6:xiao6,
			username:this.$store.state.userinfo.username || '登入'
    }
  }

}
</script>

<style scoped>
@import '../assets/css/iconfont.css';
.site-topbar{
	height:40px;
	font-size:12px;
	font-family:sans-serif;
	color:gray;
	background:#333333;
	position:relative;
}
.container{
	width:1220px;
	margin-right:auto;
	margin-left:auto;
}
.site-topbar .topbar-nav{
	float:left;
	height:40px;
	line-height:40px;
	overflow: hidden;
}
.site-topbar .topbar-cart{
	width:120px;
	margin-left: 15px;
	position: relative;
	float:right;
	height:40px;
	line-height:40px;
}
.site-topbar .topbar-info{
	line-height: 40px;
	position:relative;
	float:right;
	height:40px;	
}
.site-topbar .topbar-info .sep,.site-topbar .topbar-info .sep{
	margin:0;
	padding:0;
}
.site-topbar .sep{
	margin:0.5em;
	color:#424242;
}
.sep{
	font-family:sans-serif;
}
.site-topbar .topbar-info .sep{
	margin:0.5em;
	color:#424242;
}

.site-header{
	position:relative;
	height:100px;
}
.container{
	width:1220px;
	margin-right:auto;
	margin-left:auto;
}
.site-header .header-logo{
	width:62px;
}
.site-header .header-nav{
	vertical-align: middle;
}
.site-header .nav-list{
	position: relative;
	float:left;
	width:820px;
	margin:0;
	padding-left: 110px;
	box-sizing: border-box;
	font-size:16px;
}
.site-header .nav-category{
	position: relative;
	float:left;
	width:127px;
	padding-right:15px;	
}
.site-header .nav-item{
	float:left;
	padding-left:16px;
}
.site-header .header-search .search-text{
	width:241px;
}
.site-header .header-search .search-div input{
	outline:none;
}
.site-header .search-hot-words a{
	display: inline-block;
	margin-left:5px;
	padding:0 5px;
	font-size:12px;
	background: #eee;
	color:#757575;
	transition: all .2s;
}
.site-header .search-hot-words{
	position:absolute;
	top:42px;
	right:240px;
	text-align: right;
}
.site-header .header-search .search-div input.search-text{
	height:40px;
	border:none;
	padding:0;
	vertical-align: top;
	padding-left:8px;
	padding-right:20px;
	box-sizing: border-box;
}
.site-header .header-search .search-div input.search-btn{
	width:50px;
	height:40px;
	border:none;
	padding:0;
	background: white;
	border-left:1px solid #ddd;
}

/*导航下拉效果样式*/
.nav-item .xiala .smdetail img{
	width:150px;
}

.nav-item .xiala .smdetail{
	float: left;
	margin-top: 20px;
}
.nav-item>.xiala{
	/* display: block; */
	height: 0px;
	z-index: 10;
	overflow: hidden;
	position: absolute;
	background: #fff;
	width:1729px; 
	/* border:1px solid red; */
	box-shadow: 0 3px 4px rgba(0,0,0,0.18);
	left:-322px;
	top:100px;
	/* padding:20px 0; */
	transition: all 0.2s linear;
}
.nav-list>li{
	padding:20px 0 20px 0px;
}
.nav-item:hover >a+.xiala{
	/* height: 200px; */
	height: 206px;
}

.nav-item>.xiala>ul{
	padding-left: 300px;;
}
.nav-item{
	line-height: 60px;
}
.nav-item>.xiala ul .wenzi{
	margin:0;
	padding:0;
}
.nav-item>.xiala ul .wenzi b{
	font-weight: normal;
	font-size:12px;
	padding:0;
	margin:0;
	padding-left: 17px;
	color:brown;
}

.header-search .search{
	border: none;
	height: 40px;
	width: 40px;
	outline: none;
	background: #fff url("../assets/img/sousuo.png") no-repeat center center;
	background-size: 25px 25px;
	border-left: 1px solid #ddd;
	vertical-align: middle
}

.header-search{
	    vertical-align: middle;
}
</style>



